import React from 'react'
// import {useSelector,useDispatch} from 'react-redux'
import { connect } from "react-redux"
// import { bindActionCreators} from "redux"
import { bindActionCreators } from "../kstore/index"

function ReduxHooksPage(props) {
  console.log(props);
  // const count = useSelector(({count})=>count);
  // const dispatch = useDispatch()
  const { dispatch, count, add, minus } = props;
  console.log(props);
  const handAdd = () => {
    add();

    // dispatch({
    //   type: "ADD"
    // })
  }

  const handminus=()=>{
    minus()
  }
  return (

    <div>
      <h5>ReduxHooksPage</h5>
      <h2>{count}</h2>
      <button onClick={handAdd}>
        add
      </button>

      <button onClick={handminus}>
        minus
      </button>
    </div>
  )
}

const mapStateToProps = (state) => state;

//mapDispatchToProps 可以返回函数或者是对象
// test1
// const mapDispatchToProps = { add: () => ({ type: "ADD" }), minus: () => ({ type: "MINUS" }) };

// test2
const mapDispatchToProps = (dispatch) => {
  let creators = {
    add: () => ({ type: "ADD" }),
    minus: () => ({ type: "MINUS" })
  };
  // 为所有的方法外层包裹一个dispatch
  creators = bindActionCreators(creators, dispatch);
  console.log(creators,123,creators.add);
  return { dispatch, ...creators }
}

export default connect(mapStateToProps, mapDispatchToProps)(ReduxHooksPage);
